<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetstore</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />

</head>
<body>
<div th:replace="common/top">

</div>


<div id="BackLink">
    <a th:href = "'/catalog/viewProduct?productId='+${product.productId}">Return to <label th:text="${product.productId}" ></label></a>
</div>

<div id="Catalog" >

    <table id="CPI">
        <tr>
            <td th:text="${product.getDescriptionText()}">product description</td>
        </tr>
        <tr>
            <td>
                <img th:src="${product.descriptionImage}">
                <label th:text="${product.descriptionText}"></label>
            </td>
        </tr>
        <tr>
            <td ><b th:text="${item.itemId}"> itemId </b></td>
        </tr>
        <tr>
            <td><b><font size="4" th:text="${item.attribute1}+' '+${product.name}"> item attribute1 +  product name </font></b></td>
        </tr>
        <tr>
            <td th:text="${product.name}">product name</td>
        </tr>
        <tr>
            <td>
                <label th:if="${item.quantity <= 0}">Back ordered.</label>
                <label th:if="${item.quantity > 0}" th:text="${item.quantity}+'in stock'">quantity in stock.</label>
            </td>
        </tr>
        <tr>
            <!--<td>-->
                <!--<fmt:formatNumber value="${sessionScope.item.listPrice}" pattern="$#,##0.00" />-->
            <!--</td>-->
            <td th:text="'$'+${#numbers.formatDecimal(item.listPrice,1,2)}">Item List Price</td>
        </tr>

        <tr>
            <td>
                <!-- 弹窗。使用ajax向后台发送检查请求，若数量不足，页面不跳转，并弹窗提醒 -->
                <script th:src="@{../js/jquery-3.4.1.js}"></script>
                <script th:src="@{../js/catalog.js}"></script>
                <!--                    <a th:href="'../cart/addItemToCart?workingItemId='+${item.itemId}">Add to cart</a>-->
                <a class="Button" href="#" th:data-id="${item.itemId}" onclick="testInStock(this.getAttribute('data-id'))">Add to cart</a>
                <!--<a th:href="'../cart/addItemToCart?workingItemId='+${item.itemId}">Add to cart</a>-->
                <!--<a class="Button" th:href = "'/cart/addItemToCart?workingItemId='+${item.itemId}"> Add to Cart</a>-->
            </td>
        </tr>
    </table>

</div>
<div th:replace="common/bottom">

</div>
</body>
</html>